<template>
  <div class="main">
    <mine-title>开放能力</mine-title>
    <div class="table-area"> <!-- 表格区域 -->
      <div class="button-area">
        <mine-button type="primary" icon="el-icon-plus" @click="addNlpOrOcr('nlp')">新增自然语言分析</mine-button>
        <mine-button type="primary" icon="el-icon-plus" @click="addNlpOrOcr('ocr')">新增OCR分析</mine-button>
        <mine-button type="primary" secondary @click="loadData()"><i class="iconfont icon-reset-line"></i>刷新</mine-button>
      </div>
      <el-table @sort-change="sortChange" :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="80px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="taskName">
          <template slot="header">
            <span>任务名称</span>
            <mine-table-search @searchSubmit="searchSubmit" name="taskName"></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable>
          <template slot-scope="scope">
            {{ $common.format(scope.row.createTime, 'yyyy-MM-dd HH:mm:ss', '--') }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="完成时间" sortable>
          <template slot-scope="scope">
            {{ $common.format(scope.row.endTime, 'yyyy-MM-dd HH:mm:ss', '--') }}
          </template>
        </el-table-column>
        <el-table-column prop="taskType" label="任务类型">
          <template slot="header">
            <span>任务类型</span>
            <mine-table-screen @screenSubmit="screenSubmit" name="taskType" :list="taskTypeList"></mine-table-screen>
          </template>
          <template slot-scope="scope">
            {{ $common.fetchSingleWord({ val: scope.row.taskType, dict: taskTypeList }) }}
          </template>
        </el-table-column>
        <el-table-column prop="status">
          <template slot="header">
            <span>任务状态</span>
            <mine-table-screen @screenSubmit="screenSubmit" name="taskStatus" :list="statusList"></mine-table-screen>
          </template>
          <template slot-scope="scope">
            <status-text :value="scope.row.status" :dict="statusList"></status-text>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 'complete'" type="text" size="mini" @click="downloadAnalysis(scope.row)" :loading="scope.row.loading">下载结果</el-button>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination @numberChange="pageNumChange" :total="totalPageNum" :page-size="pageSize" :current-page="currentPage"></mine-pagination>
    </div>
  </div>
</template>

<script>
import { mappingMixins } from './mixins.js';
import statusText from "../modelAdmin/components/statusText";
export default {

  mixins: [mappingMixins],

  components: { statusText },

  created: function () {
    this.initTableHeight();
    this.loadData();
  },

  data: function () {
    return {
      loading: false, // 表格请求数据时是否显示loading
      tableData: [], // 表格数据
      pageSize: 10, // 表格一页展示的数据量
      totalPageNum: 0, // 表格总的数据量
      currentPage: 1, // 表格当前的页数
      tableHeight: 0, // 表格高度
      taskName: "", // 搜索的任务名称
      taskTypes: [], // 搜索的任务类型
      taskStatus: [], // 搜索的任务类型
    }
  },

  methods: {

    // 跳转到新增页面
    addNlpOrOcr: function (type) {
      var path = {};
      if (type == "nlp") {
        path = { name: "openAbilityNlp" };
      } else if (type == "ocr") {
        path = { name: "openAbilityOcr" };
      }
      this.$router.push(path);
    },

    // 初始化表格高度
    initTableHeight: function () {
      this.tableHeight = window.innerHeight - 338 < 300 ? 300 : window.innerHeight - 338;
    },

    // 排序方式发生改变  没接上接口
    sortChange: function (value) {
      console.log(value);
    },

    // 表格页数发生改变
    pageNumChange: function (value) {
      if (value.flag == "pageSize") {
        this.currentPage = 1;
      }
      this[value.flag] = value[value.flag];
      this.loadData();
    },

    // 任务名称搜索
    searchSubmit: function (value) {
      if (value.key === 'taskName') {
        this.taskName = value.value;
      }
      this.currentPage = 1;
      this.loadData();
    },

    // 表格列筛选
    screenSubmit: function (value) {
      if (value.key == "taskType") {
        this.taskTypes = value.value;
      } else if (value.key == "taskStatus") {
        this.taskStatus = value.value;
      }
      this.currentPage = 1;
      this.loadData();
    },

    // 获取表格数据
    loadData: async function () {
      this.loading = true;
      var send = {
        taskName: this.taskName,
        status: this.taskStatus,
        taskTypes: this.taskTypes,
        page: this.currentPage,
        pageSize: this.pageSize
      }
      try {
        const res = await this.$store.dispatch('openAbilityPlatformPredictTaskSearch', send);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tableData = data.list && data.list.length ? data.list : [];
          this.totalPageNum = data.rowCount || 0;
        } else {
          this.tableData = [];
          this.totalPageNum = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },

    // 下载分析结果
    downloadAnalysis: async function (val) {
      const params = { id: val.id };
      this.$set(val, 'loading', true);
      try {
        await this.$store.dispatch('openAbilityPlatformPredictTaskIdDownLoadResult', params);
      } catch (e) {
        console.error(e);
      }
      this.$set(val, 'loading', false);
    },

  }

}
</script>

<style lang="less" scoped>
  @import url('./common.less');

  .main {
    box-sizing: border-box;
  }

  .table-area {
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-family: PingFangSC-Regular;
  }

  .button-area {
    margin-bottom: 16px;
  }
</style>
